<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#yuan{
				width: 300px;
				height: 300px;
				background: -webkit-linear-gradient(top,green,yellow, red);
				margin: 100px auto 0;
				position: relative;
				border-radius: 50%;
			}
			#xiaoyuan{
				width: 270px;
				height: 270px;
				background: white;
				border-radius: 50%;
				position: absolute;
				left: 15px;
				top:15px;
			}
			span{
				font-size: 20px;
				display:inline-block;
			}
			#number{
				width: 100%;
				height: 100%;
				background: url(../第1天/img/3.jpg);
				border-radius: 50%;
				position: relative;
			}
			#number div{
				width: 250px;
				height: 22px;
				position: absolute;
				top:124px;
				/*background: red;*/
				left: 10px;
			}
			#hour{
				width: 5px;
				height: 80px;
				background: black;
				opacity: 0.6;
			}
			#minute{
				width: 3px;
				height: 100px;
				background:purple ;
				opacity: 0.6;
				left: 133.5px;
			}
			#second{
				width: 2px;
				height: 105px;
				background: red;
				opacity: 0.6;
				left: 134px;
			}
			.pointer{
				position: absolute;
				bottom:135px;
				left: 132.5px;
				/*修改旋转点*/
				transform-origin: 50% 100%;
			}
		</style>
	</head>
	<body>
		<div id="yuan">
			<div id="xiaoyuan">
				<div id="number">
					<div><span>9</span></div>
					<div><span>10</span></div>
					<div><span>11</span></div>
					<div><span>12</span></div>
					<div><span>1</span></div>
					<div><span>2</span></div>
					<div><span>3</span></div>
					<div><span>4</span></div>
					<div><span>5</span></div>
					<div><span>6</span></div>
					<div><span>7</span></div>
					<div><span>8</span></div>
				</div>
				<div id="hour" class="pointer">
					
				</div>
				<div id="minute" class="pointer">
					
				</div>
				<div id="second" class="pointer">
					
				</div>
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var numberDiv = document.getElementById("number");
		var daYuan = numberDiv.getElementsByTagName("div");
		var shuZi = numberDiv.getElementsByTagName("span");
		function xuanZhuan(){
			for(var i = 0;i < daYuan.length;i++){
				var rot = i*30;
				daYuan[i].style.transform = "rotateZ("+rot+"deg)";
				shuZi[i].style.transform = "rotateZ("+(-rot)+"deg)";
			}
		}
		xuanZhuan();
		var second = document.getElementById("second");
		var minute = document.getElementById("minute");
		var hour = document.getElementById("hour");
		function dateFunction(){
			//获取当前时间
			var nowDate = new Date();
			//获取当前小时数
			var nowHour = nowDate.getHours();
			//获取当前分钟数
			var nowMinute = nowDate.getMinutes();
			//获取当前秒数
			var nowSecond = nowDate.getSeconds();
			//旋转秒针，一秒6deg
			second.style.transform = "rotate("+6*nowSecond+"deg)";
			//分钟
			var min = nowMinute*6 + nowSecond/60*6;
			minute.style.transform = "rotate("+min+"deg)";
			//小时
			var hou = nowHour*30 + nowMinute/60*30 + nowSecond/60*0.5;
			hour.style.transform = "rotate("+hou+"deg)";
		}
		setInterval(function(){
			dateFunction();
		},1000)
	</script>
</html>
